<template>
  <div class="hello">
    <!-- <h1>111</h1> -->
    <el-container>
        <el-aside width="210px">
          <MEUN></MEUN>
        </el-aside>
        <el-main >
          <div class="left">
            <div>
              <TableView @table="tabledata"> </TableView>
            </div>
            <div>
              <RoseView ></RoseView>
            </div>
            <div>
              <MapView></MapView>
            </div>
            <div>
              <MapText></MapText>
            </div>
          </div>
          <div class="right">
            <div>
              <BarView></BarView>
            </div>
            <div>
              <LineView></LineView>
            </div>
          </div>
          <!-- <h1>111</h1> -->
          <!-- <router-view/> -->
          <!-- 路由指向到这里 -->
        </el-main>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import MEUN from "@/components/MEUN.vue";
import HEAD from "@/components/HEAD.vue";
import TableView from "../components/TableView.vue"
import BarView from "../components/BarView.vue"
import RoseView from "../components/RoseView.vue"
import MapView from "../components/MapView.vue"
import MapText from "../components/MapText.vue"
import LineView from "../components/LineView.vue"

export default {
  name: "HomeView",
  components: {
    MEUN,
    HEAD,
    TableView,
    MapView,
    BarView,
    RoseView,
    MapText,
    LineView,
  },
   data() {
    return {
      msg:[]
    };
  },
  methods:{
    //父组件监听到table给rose传数据
    tabledata(data){
      console.log(data)
      this.msg=data
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-header {
  padding: 0;
}
.el-aside {
  height: 700px;
    background-color: #545c64;
}
.el-main{
  display: flex;
  flex-direction: row;
  background-color: #8c9196;
}
.left{
  width: 600px;
  height: 650px;
  border-right: 10px solid #8c9196;
  background-color: white;
}
.left div{
  width: 295px;
  height: 325px;
  float: left;
  /* background-color: brown; */
  /* border: 1px solid black; */
}
.right{
  width: 600px;
  height: 650px;
  background-color: white;
}
.right div{
  width: 100%;
  height: 325px;
  float: left;
  /* background-color: brown; */
  /* border: 1px solid black; */
}
</style>
